<!DOCTYPE html>
<html lang="en">
    <head>
        <title>依赖注入-Factory</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="../libs/angular/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
        <input type="text" ng-model="num1" ng-change="calc()"/> + 
        <input type="text" ng-model="num2" ng-change="calc()" /><br/>
        <p>calcFactory1：两个数的平方和 = {{result1}}</p> 
        <p>calcFactory2：两个数的平方和 = {{result2}}</p> 
        <p>calcFactory3：两个数的平方和 = {{result3}}</p> 

        <script type="text/javascript">
            var CommonApp = angular.module('CommonApp', []);

            //方式一：求平方和
            CommonApp.factory('calcFactory1', function(){
                return {
                    square: function(){
                        var result = 0;
                        for(var i = 0; i < arguments.length; i++){
                            result += arguments[i] * arguments[i];
                        }
                        return result;
                    }
                }
            })
            
            CommonApp.config(function($provide){
                //方式2
                $provide.factory('calcFactory2', function(){
                    return {
                        square: function(){
                            var result = 0;
                            for(var i = 0; i < arguments.length; i++){
                                result += arguments[i] * arguments[i];
                            }
                            return result;
                        }
                    }                     
                })
                //方式3
                $provide.provider('calcFactory3', function(){
                    this.$get = function(){
                        return {
                            square: function(){
                                var result = 0;
                                for(var i = 0; i < arguments.length; i++){
                                    result += arguments[i] * arguments[i];
                                }
                                return result;
                            }
                        }                        
                    }
                })
            })            

            var app = angular.module('myApp', ['CommonApp']);

            app.controller('myController', ['calcFactory1', 'calcFactory2', 'calcFactory3', '$scope', function(calcFactory1, calcFactory2, calcFactory3, $scope){
                $scope.num1 = 0;
                $scope.num2 = 0;
                
                $scope.calc = function () {
                    $scope.result1 = calcFactory1.square($scope.num1, $scope.num2);
                    $scope.result2 = calcFactory2.square($scope.num1, $scope.num2);
                    $scope.result3 = calcFactory3.square($scope.num1, $scope.num2);
                }  
                $scope.calc();              
            }])
        </script>
    </body>
</html>